{% extends "layout.html" %}
{% block full_width_content %}
<div tabindex="0" class="flex-grow px-8 common-page-container"
 data-level="{{level}}" data-kwlang="{{ current_language().lang }}">
  <div class="flex flex-row gap-6 items-center">
    <h1>{{initial_adventure.name}}</h1>
    {% if can_checkoff_program %}
      <input type="checkbox"
        id="adventure_checkbox"
        class="student_adventure_checkbox text-green-700 text-center p-3 text-lg cursor-pointer self-center {% if student_adventure.ticked %}fa-solid fa-check{% endif %} "
        hx-post="/for-teachers/check_adventure?level={{ level }}&student_name={{ initial_adventure.username }}&adventure_name={{ initial_adventure.adventure_name }}&program_id={{ program_id }}"
        hx-swap="none"
        hx-disabled-elt="this"
        {% if student_adventure.ticked %}checked{% endif %}
        _="on click toggle .fa-solid .fa-check on me"
      >

      {% if can_unsubmit_program %}
        <div class="text-center">
          <button id="unsubmit-program-button" class="green-btn" data-cy="unsubmit_btn" onclick="hedyApp.unsubmit_program('{{initial_adventure.id}}', '{{_('unsubmit_warning')}}')">{{_('unsubmit_program')}}</button>
        </div>
      {% endif %}

      <div class="flex-1"></div>
      {% if next_program_id %}
      <a class="green-btn" href="/hedy/{{ next_program_id }}/view">
        {{_('next_adventure')}}
      </a>
      {% endif %}
      {% if next_classmate_program_id %}
        <a class="green-btn" href="/hedy/{{ next_classmate_program_id }}/view">{{ _('next_student') }}</a>
      {% endif %}
      {% if class_id %}
        <a class="green-btn" href="/for-teachers/class/{{ class_id }}">
          {{_('back_to_class')}}
        </a>
      {% endif %}
    {% endif %}
  </div>
  <div class="flex flex-row gap-6 items-center">
    <h2 class="p-0 m-0">{{_('level_title')}} {{level}}</h2>
    {% if initial_adventure.submitted %}
    <div class="flex-1"></div>
    <h2 id="submitted-program-title" class="p-0 m-0">{{_('submitted_header')}}</h2>
    {% endif %}
  </div>
  <div class="flex flex-row gap-6 items-center">
    {% if initial_adventure.submitted %}
    <div>{{_('by')}}
      <a {% if initial_adventure.public_profile %}onclick="window.open('/user/{{initial_adventure.username}}', '_self')"{% endif %} class="{% if initial_adventure.public_profile %}cursor-pointer{% else %}text-black{% endif %} no-underline">{{ initial_adventure.username }}</a>
    </div>
    <div class="flex-1"></div>
    <h3 id="submitted-program-details" class="p-0 m-0">{{_('submission_time')}} {{program_timestamp}}</h3>
    {% endif %}
  </div>

  {% include "hedy-page/editor-and-output.html" %}
</div>
{% endblock %}
